import { Input, Form } from 'antd';
import styles from './diskModal.less';
import classNames from 'classnames';
import { useForm } from 'antd/lib/form/Form';
import { useState } from 'react';

const Index = ({ onClose, onSave, initialValues = {} }) => {
  const [form] = useForm();
  const [submitLoading, setSubmitLoading] = useState(false);

  const handleSubmit = async () => {
    if (submitLoading === true) return;
    setSubmitLoading(true);
    try {
      const values = await form.validateFields();
      onSave?.({ ...initialValues, ...values });
    } catch (error) {
      console.log(error);
    } finally {
      setSubmitLoading(false);
    }
  };

  return (
    <div>
      <div className={styles.mask} />
      <div className={styles.main}>
        <div className={styles.header}>添加网盘地址</div>
        <div className={styles.body}>
          <Form
            form={form}
            initialValues={initialValues}
            scrollToFirstError
            className={styles.form}
            layout="vertical"
            name="basic"
            autoComplete="off"
          >
            <Form.Item
              required={false}
              label="素材标题："
              rules={[{ required: true, message: '请填写素材标题' }]}
              name="name"
            >
              <Input placeholder="请为素材添加标题，以便学生准确找到素材" />
            </Form.Item>
            <Form.Item
              required={false}
              label="网盘链接及提取码："
              rules={[{ required: true, message: '请填写网盘链接及提取码' }]}
              name="url"
            >
              <Input.TextArea rows={6} placeholder="请输入网盘链接及提取码" />
            </Form.Item>
          </Form>
        </div>
        <div className={styles.footer}>
          <div className={styles.button} onClick={handleSubmit}>
            确定
          </div>
          <div className={classNames(styles.button, styles.cancel)} onClick={() => onClose?.()}>
            取消
          </div>
        </div>
      </div>
    </div>
  );
};

export default Index;
